<style>
  .panel-title{
    line-height: 30px;
     
  }
  .panel-title span {
      display: inline-block;
      width: 12%;
      
  }
  .panel-content {
      padding-left: 25%;
  }
  .panel-content span {
      display: inline-block;
      width: 16%;
      height: 100%;
  }
</style>
<template>
    <div>
    <el-row>
        <el-col :span="23" class=" marginTop20px" id="serachId">
            <el-form :inline="true" >
                <el-form-item style="float:right">
                    <el-button type="primary" size="small" >查询</el-button>
                </el-form-item>
                <el-form-item style="float:right">
                    <el-input size="small" placeholder="请输入应用名称"></el-input>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>

    <el-row>
        <el-col :span="24" class="titleLineSymbolTwo">
        </el-col>
    </el-row>

    <el-row>
        <el-col :span="4">
            <div class="boxLeftBackgroundCcc">
                <el-tree
                :data="data2"
                show-checkbox
                node-key="id"
                :default-expanded-keys="[2, 3]"
                :default-checked-keys="[5]"
                :props="defaultProps"
                :default-expand-all="true">
                </el-tree>
            </div>
        </el-col>
        <el-col :span="19" class="toolbar30px">
            <el-table
                
                style="width: 100%"
                :row-class-name="tableRowClassName">
                <el-table-column
                prop="date"
                width="120"
                label="序号"
                >
                </el-table-column>
                <el-table-column
                prop="name"
                label="应用图标"
                >
                </el-table-column>
                <el-table-column
                prop="address"
                label="应用名称">
                </el-table-column>
                <el-table-column
                prop="address"
                label="所属市场">
                </el-table-column>
                <el-table-column
                prop="address"
                label="开发商名称">
                </el-table-column>
                <el-table-column
                prop="address"
                label="使用人数">
                </el-table-column>
                <el-table-column
                prop="address"
                label="下载次数">
                </el-table-column>
                <el-table-column
                prop="address"
                label="启动次数">
                </el-table-column>
            </el-table>
            <Collapse active-key="2">
                <Panel key="1">
                    <div class="panel-title"><span>1</span> <span><img src="src/images/icon180601.png" width="30" height="30" ></span> <span>接处警推送</span> <span>湖南省应用市场</span> <span>阳光耐特</span> <span>556</span> <span>134</span> <span>15</span></div>
                    <div slot="content" class="panel-content">                       
                             <table style="width:100%">
                               <tr><td>Android</td><td></td><td></td><td>255</td><td>55</td><td>6</td></tr>
                               <tr><td>ion</td><td></td><td></td><td>155</td><td>75</td><td>8</td></tr>
                              <tr><td>web</td><td></td><td></td><td>135</td><td>45</td><td>5</td></tr>
                          </table>                       
                    </div>
                </Panel>
                <Panel key="2">
                    <div class="panel-title"><span>2</span> <span><img src="src/images/icon180602.png" width="30" height="30"></span> <span>巡逻签到</span> <span>湖南省应用市场</span> <span>新德汇</span> <span>128</span> <span>102</span> <span>11</span></div>
                    <div slot="content" class="panel-content">                       
                             <table style="width:100%">
                               <tr><td>Android</td><td></td><td></td><td>255</td><td>55</td><td>6</td></tr>
                               <tr><td>ion</td><td></td><td></td><td>155</td><td>75</td><td>8</td></tr>
                              <tr><td>web</td><td></td><td></td><td>135</td><td>45</td><td>5</td></tr>
                          </table>                       
                    </div>
                </Panel>
                 <Panel key="3">
                    <div class="panel-title"><span>3</span> <span><img src="src/images/icon180603.png" width="30" height="30"></span> <span>反恐app</span> <span>湖南省应用市场</span> <span>阳光耐特</span> <span>1024</span> <span>112</span> <span>10</span></div>
                    <div slot="content" class="panel-content">                       
                             <table style="width:100%">
                               <tr><td>Android</td><td></td><td></td><td>255</td><td>55</td><td>6</td></tr>
                               <tr><td>ion</td><td></td><td></td><td>155</td><td>75</td><td>8</td></tr>
                              <tr><td>web</td><td></td><td></td><td>135</td><td>45</td><td>5</td></tr>
                          </table>                       
                    </div>
                </Panel>
              
            </Collapse>
        </el-col>
    </el-row>

    </div>
</template>

<script>
  export default {
    data() {
      return {
        data2: [{
          id: 1,
          label: '应用市场',
          children: [
              {
            id: 4,
            label: '广东省应用市场',
          },{
              id: 5,
              label: '广州市应用市场'
          },{
              id: 6,
              label: '深圳市应用市场'
          }
          ]
        },  
        ],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
  setTimeout(()=>{
      let div = document.getElementsByClassName('el-table__empty-block')[0];
      let spans = document.getElementsByClassName('ivu-icon-arrow-right-b')[0];
      let spans2 = document.getElementsByClassName('ivu-icon-arrow-right-b')[1];
      let spans3 = document.getElementsByClassName('ivu-icon-arrow-right-b')[2];
      div.style.display = 'none';
      spans.style.display = 'none';
      spans2.style.display = 'none';
      spans3.style.display = 'none';

  },50);
  setInterval(()=>{
      let div = document.getElementsByClassName('el-table__empty-block')[0];
      div.style.display = 'none';
      let spans = document.getElementsByClassName('ivu-icon-arrow-right-b')[0];
      let spans2 = document.getElementsByClassName('ivu-icon-arrow-right-b')[1];
      let spans3 = document.getElementsByClassName('ivu-icon-arrow-right-b')[2];
      let baiQi = document.getElementsByClassName('ivu-collapse-content')[0];
      div.style.display = 'none';
      spans.style.display = 'none';
      spans2.style.display = 'none';
      spans3.style.display = 'none';
      baiQi.style.display = 'block';
  },2000)
</script>

<style>

</style>
